在搜尋參考資料的時候找到這到二篇文章：

• 從頭開始學習開發 Chrome extension （v3 版本）
  • 使用 HTML / CSS / JS 開發
  • 有清楚的 PR review message 產生器教學
• Day26-Google Extension 與 Vite
  • 使用 Vite 選擇 Vue 開發
  • 開發 OpenAI 聊天室

這邊想結合二篇文章所學及一些官方找到的資料從頭開發一個適合自己需求的「MR 通知文字小工具」

第一步、建立專案

輸入以下指令建議 Vue 的專案

npm create vite@latest

以下是我的選項，可以依自己習慣調整：
(選 javascript 是因為專案較簡單，但較複雜的專案會建議使用 typescript，可以減少很多數值轉換或是缺失的小問題)

>npx
>create-vite
Project name: mr-review-message
Select a framework: Vue
Select a variant: › JavaScript

使用 vscode 打開專案資料夾，開啟 termainal 輸入以下指令

npm install

或是簡寫

npm i

讓專案安裝必要的 Package
這樣就可以得到一個初始 Vue 專案囉~

第二步、新增 Tailwind

跟著 Tailwind 官方網站的教學，為專案安裝 tailwind

1. 繼續在 terminal 輸入以下指令，等待安裝

   npm install tailwindcss @tailwindcss/vite
   

2. 在根目錄找到 vite.config.js 檔案，新增幾行程式碼

    import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    import tailwindcss from '@tailwindcss/vite' //新增
   
    // https://vite.dev/config/
    export default defineConfig({
      plugins: [
        vue(),
        tailwindcss(), //新增
      ],
    })
   

3. 從 src\main.js 我們可以發現 import './style.css'，表示 vue 專案所統籌載入控管 css 的檔案為 ./style.css，所以我們到 src\style.css 並在第一行 新增

   @import "tailwindcss";
   

   (也可以順便把不需要的 CSS 刪除)

4. 再來就是來測試看看我們有沒有安裝成功啦~
   開啟 terminal 並輸入以下指令，將專案跑起來

   npm run dev
   

   接著到 src\App.vue 使用一些 tailwind 的 class 看看有沒有成功套用，例如 tailwind 官網提供的

   <h1 class="text-3xl font-bold underline">
     Hello world!
   </h1>
   

   打開 terminal 中 Local 的連結，這樣就可以查看網頁是否有套用 CSS 效果的 Hello world 囉！
   
   (上圖有把初始 vue 專案的程式碼移除，僅保留 Hello world!)

💡: 也建議將專案推到自己的 GitHub 上，方便追蹤每次修改跟調整哦~

今天我們完持建好專案的第一步囉! 明天就來開始加入讓它變成 extension 重要的檔案 ─ manifest.json 吧！